<template>
  <div class="purchase-return-entry">
    <div class="date-range-search">
      <el-form :inline="true" class="search-form">
        <el-form-item label="单据号或供应商或备注:">
          <el-input v-model="searchQuery" placeholder="请输入单据号或供应商或备注"></el-input>
        </el-form-item>
        <el-form-item label="报价截止日期:">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator=" - "
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
          <span class="spanRed">*</span>供应商1：
          <el-autocomplete
            v-model="search1"
            :fetch-suggestions="searchSuggestions"
            placeholder="请输入供应商名称"
            @select="handleSelect1">
            <template v-slot:default="{ item }">
              <div v-if="item.disabled" class="el-autocomplete-suggestion__item" style="color: #999">
                暂无数据
              </div>
              <div v-else class="el-autocomplete-suggestion__item">
                {{ item.name }}
              </div>
            </template>
          </el-autocomplete>
          <el-button style="margin-left: -10px;" @click="dialogVisible = true">...</el-button>
          <br>
          <span class="spanRed">*</span>供应商2：
          <el-autocomplete
            v-model="search2"
            :fetch-suggestions="searchSuggestions"
            placeholder="请输入供应商名称"
            @select="handleSelect2">
            <template v-slot:default="{ item }">
              <div v-if="item.disabled" class="el-autocomplete-suggestion__item" style="color: #999">
                暂无数据
              </div>
              <div v-else class="el-autocomplete-suggestion__item">
                {{ item.name }}
              </div>
            </template>
          </el-autocomplete>
          <el-button style="margin-left: -10px;" @click="dialogVisible = true">...</el-button>
          <span class="spanRed">*</span>供应商3：
          <el-autocomplete
            v-model="search3"
            :fetch-suggestions="searchSuggestions"
            placeholder="请输入供应商名称"
            @select="handleSelect3">
            <template v-slot:default="{ item }">
              <div v-if="item.disabled" class="el-autocomplete-suggestion__item" style="color: #999">
                暂无数据
              </div>
              <div v-else class="el-autocomplete-suggestion__item">
                {{ item.name }}
              </div>
            </template>
          </el-autocomplete>
          <el-button style="margin-left: -10px;" @click="dialogVisible = true">...</el-button>
        <el-input
          style="width: 200px"
          placeholder="商品"
          v-model="product"
        ></el-input>
        <el-button style="margin-left: -10px;" @click="dialogVisible2 = true">选择</el-button>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
          <el-button @click="advancedSearch">高级搜索</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-divider></el-divider>

    <div class="actions">
      <el-button type="primary" @click="goto('PriceComparison')">新增</el-button>
      <el-button>导入</el-button>
      <el-button>导出</el-button>
      <el-button>删除</el-button>
    </div>

    <el-dialog title="选择供应商" :visible.sync="dialogVisible">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="类别">
          <el-select v-model="selectedCategory" placeholder="请选择类别">
            <el-option label="广东" value="广东"></el-option>
            <el-option label="酒水饮料供应商" value="酒水饮料供应商"></el-option>
            <el-option label="食品供应商" value="食品供应商"></el-option>
            <el-option label="零食供应商" value="零食供应商"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model="searchQuery" placeholder="输入编号/名称/联系人/电话查询"></el-input>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="showDisabled">显示禁用供应商</el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchSuppliers">查询</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="supplier" style="width: 100%">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="category" label="类别" width="120"></el-table-column>
        <el-table-column prop="code" label="编号" width="120"></el-table-column>
        <el-table-column prop="name" label="名称" width="180"></el-table-column>
        <el-table-column prop="contact" label="联系人" width="120"></el-table-column>
        <el-table-column prop="phone" label="手机" width="120"></el-table-column>
        <el-table-column prop="remarks" label="备注" width="120"></el-table-column>
      </el-table>

      <div slot="footer" class="dialog-footer">
        <el-button>新增供应商</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmSelection">确定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="选择商品" :visible.sync="dialogVisible2" width="80%">
      <div>
        <el-tabs v-model="activeTab" @tab-click="handleTabClick">
          <el-tab-pane label="商品" name="products"></el-tab-pane>
          <el-tab-pane label="近期交易" name="recent-transactions"></el-tab-pane>
        </el-tabs>

        <div class="search-bar">
          <el-input
            style="width: 200px"
            placeholder="请输入商品编号/名称/型号/品牌"
            v-model="searchQuery">
          </el-input>
          仓库：
          <el-select v-model="selectedWarehouse" placeholder="仓库">
            <el-option label="空" value=""></el-option>
            <!-- 其他仓库选项可以动态生成 -->
          </el-select>
          <el-checkbox v-model="zeroInventory">零库存商品</el-checkbox>
          <el-button type="primary" @click="search">查询</el-button>
          <el-button @click="常用商品">常用商品</el-button>
        </div>

        <div class="content-wrapper">
          <el-row type="flex" justify="space-between">
            <el-col :span="16">
              <el-table :data="products" style="width: 100%">
                <el-table-column type="expand" label="图片" width="180">
                  <template slot-scope="scope">
                    <img :src="scope.row.imageUrl" alt="商品图片" style="width: 100%;">
                  </template>
                </el-table-column>
                <el-table-column prop="productNumber" label="商品编号"></el-table-column>
                <el-table-column prop="brand" label="品牌"></el-table-column>
                <el-table-column prop="origin" label="产地"></el-table-column>
                <el-table-column prop="auxiliaryAttributeNumber" label="辅助属性编号"></el-table-column>
                <el-table-column prop="productName" label="商品名称"></el-table-column>
                <el-table-column prop="specification" label="规格型号"></el-table-column>
                <el-table-column prop="category" label="商品类别"></el-table-column>
                <el-table-column prop="attributes" label="属性"></el-table-column>
                <el-table-column prop="unit" label="单位"></el-table-column>
                <el-table-column prop="basicStock" label="库存基本数"></el-table-column>
                <el-table-column prop="availableStock" label="可用库存"></el-table-column>
                <el-table-column prop="entryQuantity" label="录入数量"></el-table-column>
                <el-table-column prop="remarks" label="备注"></el-table-column>
              </el-table>
            </el-col>
            <el-col :span="8">
              <el-tree
                :data="categories"
                :props="defaultProps"
                style="width: 100%">
              </el-tree>
            </el-col>
          </el-row>
        </div>
        <div class="pagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[20, 50, 100]"
            :page-size="20"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalProducts">
          </el-pagination>
        </div>

        <div class="actions">
          <el-button type="primary" @click="selectProduct">选中</el-button>
          <el-button @click="selectAndClose">选中并关闭</el-button>
          <el-button @click="closeDialog2">关闭</el-button>
        </div>
      </div>
    </el-dialog>

    <el-table
      :data="orders"
      border
      style="width: 100%; font-size: 13px; margin-left: 20px;"
      show-summary>
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="操作" width="55">
        <template>
          <i class="el-icon-edit"></i>
          <i class="el-icon-delete"></i>
        </template>
      </el-table-column>
      <el-table-column prop="orderDate" label="单据日期" width="200"></el-table-column>
      <el-table-column prop="orderDate" label="报价截止日期" width="200"></el-table-column>
      <el-table-column prop="orderNumber" label="单据编号" width="200"></el-table-column>
      <el-table-column prop="businessType" label="业务类别" width="200"></el-table-column>
      <el-table-column prop="supplier" label="供应商1" width="250"></el-table-column>
      <el-table-column prop="supplier" label="供应商2" width="250"></el-table-column>
      <el-table-column prop="supplier" label="供应商3" width="250"></el-table-column>
      <el-table-column prop="salesperson" label="业务员"></el-table-column>
      <el-table-column prop="purchaseAmount" label="最低金额"></el-table-column>
      <el-table-column prop="quantity" label="数量"></el-table-column>
      <el-table-column prop="creator" label="制单人"></el-table-column>
      <el-table-column prop="creationTime" label="制单时间" width="200"></el-table-column>
      <el-table-column prop="remarks" label="备注"></el-table-column>
      <el-table-column prop="deliveryMethod" label="交货方式"></el-table-column>
    </el-table>
    <el-pagination
      style="position: absolute; left: 700px;"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>

    <el-dialog
      title="商品库存查询"
      :visible.sync="dialogVisible3"
      width="700px">
      <div>
        <el-input
          v-model="productName"
          disabled
          placeholder="商品名称或编号">
        </el-input>

        <el-table
          :data="inventoryData"
          style="width: 100%">
          <el-table-column
            prop="warehouse"
            label="仓库名称">
          </el-table-column>
          <el-table-column
            prop="quantity"
            label="数量">
          </el-table-column>
        </el-table>

        <div class="pagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[1, 2, 3, 4]"
            :page-size="4"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalItems">
          </el-pagination>
        </div>

        <div class="dialog-footer">
          <el-button type="primary" @click="confirm">确认</el-button>
          <el-button @click="closeDialog">关闭</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      dateRange: [],
      orderStatus: '',
      auditStatus: '',
      warehouse: '',
      product: '',
      dialogVisible3: false,
      dialogVisible2: false,
      activeTab: 'products',
      selectedWarehouse: '',
      zeroInventory: false,
      categories: [
        {
          label: "全部",
          children: [
            { label: "办公用品" },
            { label: "茶", children: [{ label: "绿茶" }] },
            {
              label: "酒类",
              children: [
                {
                  label: "红酒",
                  children: [{ label: "国产" }, { label: "进口" }],
                },
                { label: "啤酒" },
                { label: "葡萄酒" },
              ],
            },
            {
              label: "食品",
              children: [
                { label: "调味品" },
                { label: "进口食品" },
                { label: "零食" },
              ],
            },
            {
              label: "饮料",
              children: [
                { label: "果汁" },
                { label: "矿泉水" },
                { label: "乳品" },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      dialogVisible: false,
      selectedCategory: "",
      searchQuery: "",
      showDisabled: false,
      supplier: [
        {
          category: "广东",
          code: "G00001",
          name: "商品综合批发有限公司",
          contact: "王",
          phone: "180****0000",
          remarks: "",
        },
        {
          category: "酒水饮料供应商",
          code: "G00002",
          name: "金小蝶食品贸易有限公司",
          contact: "管先生",
          phone: "188****7777",
          remarks: "",
        },
      ],
      currentPage4: 3,
      totalProducts: 0,
      supplier: '',
      salesperson: '',
      documentDate: '',
      shippingAddress: '',
      orders: [
        {
          order: 'sp001 苹果',
          orderDate: '2024-12-17',
          orderNumber: 'bj20241217002',
          businessType: '询价',
          supplier: 'G00002 金小蝶食品贸易有限公司',
          salesperson: '购货-小李',
          purchaseAmount: 241870.00,
          buyprice: 0,
          quantity: 5000,
          creator: '张三',
          creationTime: '2024-12-17 10:00:00',
          remarks: '无',
          deliveryMethod: '快递',
        },
        {
          order: 'sp002 苹果',
          buyprice: 0,
          orderDate: '2024-12-17',
          orderNumber: 'bj20241217002',
          businessType: '询价',
          supplier: 'G00002 金小蝶食品贸易有限公司',
          salesperson: '购货-小李',
          purchaseOrderNumber: 'PO001',
          salesOrderNumber: 'SO001',
          purchaseAmount: 241870.00,
          quantity: 5000,
          creator: '张三',
          creationTime: '2024-12-17 10:00:00',
          remarks: '无',
          deliveryMethod: '快递',
        },
      ],
      productName: '',
      currentPage: 1,
      totalItems: 1,
    };
  },
  methods: {
    search() {
      console.log('查询条件：', this.searchQuery, this.dateRange, this.orderStatus, this.auditStatus, this.warehouse, this.product);
    },
    selectAndClose() {
      this.selectProduct();
      this.closeDialog2();
    },
    closeDialog2() {
      this.dialogVisible2 = false;
    },
    advancedSearch() {
      // 高级搜索逻辑
    },
    saveAndAdd() {
      console.log('保存并新增');
    },
    audit() {
      console.log('审核');
    },
    handleSizeChange(val) {
      // 分页大小改变时的逻辑
    },
    handleCurrentChange(val) {
      // 当前页码改变时的逻辑
    },
    handleTabClick(tab) {
      // 选项卡点击时的逻辑
    },
    selectProduct() {
      // 选中商品的逻辑
    },
    selectAndClose() {
      // 选中商品并关闭对话框的逻辑
      this.dialogVisible2 = false;
    },
    closeDialog() {
      // 关闭对话框的逻辑
      this.dialogVisible2 = false;
      this.dialogVisible3 = false;
    },
    confirm() {
      // 确认按钮的逻辑
    },
    goto(to) {
      this.$router.push(to);
    }
  }
};
</script>

<style scoped>
.search-form {
  margin-bottom: 20px;
}

.actions {
  margin-top: 20px;
  text-align: right;
  margin-bottom: 10px;
}

.search-form .el-button {
  margin-left: 10px;
}
</style>